<template>
  <div class="NavBar">
    <div style="display: flex; flex: 1">
      <div class="left">{{ title }}数字乡村</div>
      <MenuList @on-select-nav="onSelectNav"></MenuList>
    </div>
    <div class="right">
      <div class="time">
        <span>{{ time }}</span>
        <span>{{ week }}</span>
      </div>
      <div class="fgx"></div>
      <img src="@/assets/common/太阳.png" alt="" />
      <img style="margin: 0px 10px" src="@/assets/common/温度.png" alt="" />
      <div>{{ wd }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import MenuList from './MenuList.vue';
import dayjs from 'dayjs';
const router = useRouter();
const menuNav = ref('');
const title = ref('张家口村');
const wd = ref('17');
let time = ref('');
let week = ref('');
const weeks = ref(['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);

const getTime = () => {
  time.value = dayjs().format('YYYY年MM月DD日');
  week.value = weeks.value[dayjs().day() - 0];
};
onMounted(async () => {
  await nextTick();
  getTime();
});

const onSelectNav = (item) => {
  menuNav.value = item.path;
  console.log('item', item);
  if (item.target === '_blank') {
    window.open('/' + item.path);
  } else {
    router.push(item.path);
  }
};
</script>
<style lang="scss" scoped>
.NavBar {
  font-family: 'YouSheBiaoTiHei';
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2001;
  color: white;
  border: 1px solid rgb(36, 110, 197);
  background:
    url('@/assets/common/标题.png') no-repeat 0 0 / 100% 130%,
    linear-gradient(-90deg, rgb(1, 22, 55) 0%, rgb(7, 51, 109) 100%);

  .left {
    width: 540px;
    display: flex;
    align-items: center;
    font-family: 'YouSheBiaoTiHei';
    font-size: 30px;
    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
    padding-left: 40px;
    white-space: nowrap;
    align-items: center;
    background: url('@/assets/common/标题背板.png') no-repeat 0 6px / 100% 145%;
  }

  .fgx {
    background: url('../../src/assets/images/分割线.jpg') no-repeat 0 0/100% 100%;
    width: 2px;
    height: 36px;
    opacity: 0.8;
    margin: 4px 14px 0px 14px;
  }

  .route {
    display: flex;
    // justify-content: space-between;
    align-items: center;
  }

  .right {
    // width: 380px;
    display: flex;
    padding-right: 22px;
    justify-content: center;
    align-items: center;
    font-size: 18px;

    .time {
      display: flex;
      flex-direction: column;
      justify-content: center;
      white-space: nowrap;
      align-items: center;
    }

    .right-item {
      display: flex;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.NavBar::before {
  background: url('../../src/assets/logo/背景.jpg') no-repeat 0 0/100% 100%;
  opacity: 0.5;
  width: 100%;
  content: '';
  position: absolute;
  z-index: -2;
  height: 80px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
}

.btoList {
  width: 100%;
  position: fixed;
  display: flex;
  bottom: 54px;
  justify-content: center;

  .buttomItem {
    width: 134px;
    height: 35px;
    display: flex;
    cursor: pointer;
    font-family: 'YouSheBiaoTiHei';
    justify-content: center;
    font-size: 18px;
    align-items: center;
    background: url('@/assets/common/threenav.png') no-repeat 0 0/100% 100%;

    .icon {
      position: relative;
      top: -5px;
      right: -12px;
    }

    &.active {
      background: url('@/assets/common/threeac.png') no-repeat 0 0 / 100% 100%;
      background-size: cover;
    }
  }
}
</style>

<style lang="scss">
.el-dropdown__popper .el-dropdown-menu {
  background: #1f5f6e !important;
  color: white;
}

.el-dropdown-menu__item {
  color: white;
}

.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #103942 !important;
  color: white;
}

.el-dropdown-menu__item--divided {
  border-top: none;
}
</style>
